<template>
	<view class="tui-container">
		<view class="tui-searchbox" @tap="search">
			<view class="tui-rolling-search">
				<icon type="search" :size='13' color='#999'></icon>
				<swiper vertical autoplay circular interval="8000" class="tui-swiper">
					<!-- <swiper-item v-for="(item,index) in hotSearch" :key="index" class="tui-swiper-item" @tap="search">
						<view class="tui-hot-item">大家正在搜：{{item}}</view>
					</swiper-item> -->
				</swiper>
			</view>
		</view>
		<!--banner-->
		<banner></banner>
		
		<!-- 分类 -->
		<scroll-view id="tab-bar" scroll-with-animation class="tui-scroll-h" :scroll-x="true" :show-scrollbar="false"
		 :scroll-into-view="scrollInto">
			<view v-for="(tab, index) in tabBars" :key="tab.id" class="tui-tab-item" :id="tab.id" :data-current="index" @click="tabClick">
				<text class="tui-tab-item-title" :class="{ 'tui-tab-item-title-active': tabIndex == index }">{{ tab.name }}</text>
			</view>
		</scroll-view>
		
		<hot-topics v-show="tabIndex==0"></hot-topics>
		<hot-users v-show="tabIndex==1"></hot-users>
	</view>
</template>

<script>
	
	import banner from "pages/index/banner.vue"
	import hotTopics from "pages/index/hot-topics.vue"
	import hotUsers from "pages/index/hot-users.vue"
	export default {
		computed: {
		},
		components:{
			banner,
			hotTopics,
			hotUsers
		},
		data() {
			return {
				tabIndex: 0,
				currentTab:'hotTopic',
				tabBars: [{
						name: '热帖',
						id: 'hotTopic'
					},
					{
						name: '用户推荐',
						id: 'hotUser'
					}
				],
				scrollInto: ''
			}
		},
		onLoad: function(options) {
			
		},
		//页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {
			
		},

		onReachBottom: function() {
			 uni.$emit('onReachBottom',this.currentTab); //触底，通知子组件
		},
		created() {
		},
		methods: {
			search: function() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			detail(e) {
				
			},
			tabClick(event){	
				this.currentTab = event.currentTarget.id
				this.tabIndex = event.currentTarget.dataset.current
				console.log(this.tabIndex)
			},
		},
	}
</script>

<style>
	.tui-container {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* 搜索框 */
	.tui-searchbox {
		padding: 16rpx 20rpx;
		box-sizing: border-box;
		background-color: #F2F2F2;
	}

	.tui-rolling-search {
		width: 100%;
		height: 60rpx;
		border-radius: 35rpx;
		padding: 0 40rpx 0 30rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		color: #999;
	}
	/* 搜索框 */


	/* 分类 */
	.tui-scroll-h {
		height: 80rpx;
		background-color: #ffffff;
		flex-direction: row;
		white-space: nowrap;
		/* position: fixed; */
		/* left: 0; */
		z-index: 999;	
	}
	
	.tui-tab-item {
			/* #ifndef APP-PLUS */
			display: inline-block;
			/* #endif */
			flex-wrap: nowrap;
			padding-left: 34rpx;
			padding-right: 34rpx;
	}
	.tui-tab-item-title {
			color: #555;
			font-size: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			flex-wrap: nowrap;
			/* #ifndef APP-PLUS */
			white-space: nowrap;
			/* #endif */
	}
	
	.tui-tab-item-title-active {
			color: #5677fc;
			font-size: 36rpx;
			font-weight: bold;
			border-bottom-width: 6rpx;
			border-color: #5677fc;
			text-align: center;
	}
</style>
